<template>
	<view class="recommend-content bg-color">
		<view class="recommend-item" v-for="item in recommend" :key="item.id">
			<image class="big-image" :src="item.bigImage" mode="widthFix"></image>
			<view class="small-image">
				<image :src="item.smallImage0" mode="widthFix"></image>
				<image :src="item.smallImage1" mode="widthFix"></image>
				<image :src="item.smallImage2" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		recommend: Array
	})
</script>

<style scoped lang="scss">
.recommend-content{
	padding: 20rpx;
	.recommend-item{
		background: #fff;
		display: flex;
		flex-direction: column;
		margin: 20rpx 0;
		border-radius: 20rpx;
		border: 2rpx solid #CCCCCC;
		overflow: hidden;
		.big-image{
			width: 100%;
			height: 308rpx;
		}
		.small-image{
			display: flex;
			height: 252rpx;
		}
	}
}
</style>